<template>
   <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="编号">
         <el-input v-model="formData.id" placeholder="请输入分类ID整数型" clearable />
      </el-form-item>
      <el-form-item label="名称">
         <el-input v-model="formData.name" placeholder="请输入分类名称" clearable />
      </el-form-item>
      <el-form-item label="批量查询">
         <el-input v-model="formData.ids" placeholder="请输入分类ID值" clearable />
      </el-form-item>
      <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
   </el-form>
   <el-table :data="categoryData" style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="90" />
      <el-table-column prop="name" label="分类名称" width="120" />
      <el-table-column prop="img" label="图片" width="120">
         <template #default="scope">
            <img :src="scope.row.img" alt="">
         </template>

      </el-table-column>
      <el-table-column prop="seq" label="排序" width="90" />
      <el-table-column prop="parentId" label="父编号" width="90" />
      <el-table-column fixed="right" label="操作" width="140">
         <template #default="scope">
            <el-button type="danger" size="small" @click="offlineClick(scope.row)">下线</el-button>
            <el-button type="warning" size="small" @click="handleClick(scope.row)">修改</el-button>
         </template>
      </el-table-column>
   </el-table>
    <el-pagination background layout="total,prev, pager, next" 
         :total="pageData.total" 
         :page-size="pageData.pageSize"  
         @current-change="currentChange"/>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
//把接口api引入
import { CategoryApi } from '@/api';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
const router=useRouter()  //负责路由页面内部跳转 不负责参数传递
const formData = reactive({
   name: '',
   id: '',
   ids: []
})

//分页的变量
const pageData = reactive({ 
   total: 20,  //总条数
   pageSize: 3,// 每一页显示的数据
   pageNum:1  // 当前页
   
})

const categoryData = ref([])
//页面渲染 在页面加载时候同时渲染我的数据
// 钩子函数  挂载
onMounted(() => {
   CallcategoryApi()
})

//获取列表数据
const CallcategoryApi = () => {
   let id = formData.id === '' ? undefined : formData.id
   let name = formData.name === '' ? undefined : formData.name
   let ids = formData.ids[0] === '' ? undefined : formData.ids

   CategoryApi.select.call({
      id: id, name: name, ids: ids,
      pageNum: pageData.pageNum,
      pageSize:pageData.pageSize

   }).then((res: any) => {
      //console.log(res);
      categoryData.value = res.items
      pageData.total=res.total

   })
}
//点击获取页码 并展示数据
const currentChange = (num: number) => {
   console.log(`current page: ${num}`)
   pageData.pageNum = num
   //刷新当前页面
   CallcategoryApi()
}
// 删除
const offlineClick = (row:any) => { 
   console.log(row);
   ElMessageBox.confirm(
      '您确定要对：'+row.name+' 下线吗？',
      '警告！',
      {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
      }
   )
      .then(() => {
          CategoryApi.delete.call({ id: row.id }).then((res: any) => {
             console.log(res);
             ElMessage({
               type: 'success',
               message: '下线成功！ 感谢一路陪伴',
            })
            //刷新列表
            CallcategoryApi()

         })
        
      })
      .catch(() => {
         ElMessage({
            type: 'info',
            message: '感谢手下留情',
         })
      })

  
}


//修改
const handleClick = (row:any) => {
   console.log('click')
   router.push({name:'category-edit',query:{id:row.id}})
}
const onSubmit = () => {
   console.log('submit!')
   CallcategoryApi()
}
</script>

<style scoped>
img {
   width: 50px;
   height: 50px;
}


</style>
<style>
.el-input__inner {
   width: 120px !important;
   font-size: 12px !important;
}

</style>